<template>
  <div class="container">
    <el-card class="user-card">
      <div class="card-header">
        <span class="header-title">用户修改密码 </span>
        <div class="header-line"></div>
      </div>

      <el-form
        ref="form"
        :model="user"
        label-width="100px"
        class="user-form"
        label-position="left"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input
                v-model="oldPassword"
                placeholder="请输入原密码"
                class="custom-input"
                @change="checkOldPassword"
              ></el-input>
              <label :style="oldStyle">{{oldT}}</label>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="新密码初" prop="newPassword1">
              <el-input
                v-model="newPassword1"
                placeholder="请输入新密码"
                class="custom-input"
                @change="checkPasswordReg"
              ></el-input>
              <label :style="new1Style">{{newT1}}</label>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="新密码确认" prop="newPassword2">
              <el-input
                v-model="newPassword2"
                placeholder="请确认新密码"
                class="custom-input"
                @change="checkPassword2"
              ></el-input>
              <label :style="new2Style">{{newT2}}</label>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="form-actions">
          <el-button type="primary" class="submit-btn" @click="save()"
            >保存修改</el-button
          >
          <el-button class="cancel-btn" @click="back()">返回列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "updateUserPassword",
  data() {
    return {
      id:0,
      oldPassword: "",
      newPassword1: "",
      newPassword2: "",
      isSubmit:false,
      oldT:"",
      newT1:"",
      newT2:"",
      oldStyle:{color:"red"},
        new1Style:{color:"red"},
        new2Style:{color:"red"}
    };
  },
  methods: {
    checkOldPassword() {
      this.id = this.$route.params.id;
      console.log("userI是:" + this.id);
      this.$axios({
        method: "post",
        url: "api/user/checkOldPassword",
        data: {
          id: this.id,
          oldPassword: this.oldPassword,
        },
      })
        .then((rs) => {
          if (rs.data.result != "true") {
         
            this.oldStyle.color="red";
            this.oldT="原密码输入错误";
          } else {
            this.oldStyle.color="green";
            this.oldT="原密码输入正确";
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    checkPasswordReg() {
       
        console.log("新密码："+this.newPassword1);
        console.log("旧密码："+this.oldPassword);
        if(this.oldPassword==this.newPassword1){
     this.new1Style.color="red";
      this.newT1="新旧密码不能一样";
      return;
        }
        const rule = /^[\w!@#$%^&*]{6,}$/;
      if (!rule.test(this.newPassword1)) {
      this.new1Style.color="red";
      this.newT1="密码必须由数字,大小写字母和特殊字符组成,并且不得超过六位数"
      return false;
      }
      else{
          this.new1Style.color="green";
      this.newT1="密码输入正确";
      }
    },
    checkPassword2(){
        if(this.newPassword2!=this.newPassword1){
            this.new2Style.color="red";
            this.newT2="两次密码不一致";
        }else{
            this.newT2="密码输入正确";
            this.new2Style.color="green";
        }
    },
    back() {
      this.$router.push("/updateUser");
    },
    save() {
        if(this.new1Style.color!="green"||this.new2Style.color!="green"||this.oldStyle.color!="green"){
            this.checkOldPassword();
            this.checkPassword2();
            this.checkPasswordReg();
            return false;
        }
      this.$axios
        .post("/api/user/updatePassword", {
            id:this.id,
            password:this.newPassword2
        })
        .then((rs) => {
       
        if(rs.data.result=="修改成功"){
            alert("修改成功，请重新登录");
        window.sessionStorage.removeItem("token");
        window.sessionStorage.removeItem("user");
        if (this.$router.currentRoute.path !== "/login") {
          this.$router.push("/login");
        }
        }   
        }).catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 70vh;
}

.user-card {
  max-width: 800px;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-header {
  padding: 20px 24px 12px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  display: block;
  margin-bottom: 8px;
}

.header-line {
  height: 2px;
  background: linear-gradient(90deg, #409eff 0%, rgba(64, 158, 255, 0.1) 100%);
}

.user-form {
  padding: 24px;
}

.custom-input {
  border-radius: 6px;
}

.custom-input ::v-deep .el-input__inner {
  border-radius: 6px;
  transition: all 0.3s;
}

.custom-input ::v-deep .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.custom-radio ::v-deep .el-radio {
  margin-right: 24px;
}

.custom-radio ::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #409eff;
  border-color: #409eff;
}

.form-actions {
  margin-top: 32px;
  text-align: center;
}

.submit-btn {
  width: 120px;
  border-radius: 6px;
  padding: 12px 20px;
  background: #409eff;
  border: none;
  transition: all 0.3s;
}

.submit-btn:hover {
  background: #66b1ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.cancel-btn {
  width: 120px;
  border-radius: 6px;
  padding: 12px 20px;
  border: 1px solid #dcdfe6;
  color: #606266;
  transition: all 0.3s;
}

.cancel-btn:hover {
  color: #409eff;
  border-color: #409eff;
  background-color: rgba(64, 158, 255, 0.05);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .el-col {
    width: 100%;
    margin-bottom: 16px;
  }

  .user-card {
    margin: 10px;
  }

  .user-form {
    padding: 16px;
  }
}
</style>